<template>
	<div id="share-push">
		<div class="header">
			<div class="container left">
				<img src="../../assets/images/back2x.png" @click="backTo">
			</div>
			<div class="container center">资产分析</div>
			<div class="container right"></div>
		</div>
		<div v-show="module==0">
			<div :class="{banner:true,
						 purpleStyle:isActive=='purple',
						 orangeStyle:isActive=='orange',
						 yellowStyle:isActive=='yellow',
						 lightBlueStyle:isActive=='lightBlue',
						 blueStyle:isActive=='blue'
			}">
				<div class="score">
					<div class="number" v-text="message.defeat"></div><div class="unit">分</div>
				</div>
				<div class="slogan" v-text="'— '+message.slogon+' —'"></div>
				<div class="quote">
					<div class="quoteContainer">
						<div class="border-shadow top"></div>
						<div class="border-shadow bottom"></div>
						<div class="content" v-text="time+'您赚了'+message.profit+'%,'"></div>
						<div class="content" v-text="'超过了'+message.defeat+'%资产相近的股民。'"></div>
						<div class="symbol-quote left">"</div>
						<div class="symbol-quote right">"</div>
					</div>
				</div>
			</div>
			<div class="share-btn" @click="Share">分享</div>
		</div>
		<return-error v-show="module==1" class="error"></return-error>
		<return-empty v-show="module==2" class="empty"></return-empty>
	</div>
</template>
<script>
	import RemoteDAO from '@/common/remoteDAO'
	import ReturnError from '@/components/ReturnError'
	import ReturnEmpty from '@/components/ReturnEmpty'
	import constant from '@/common/constant'

	export default{
		data(){
			return {
				module:0,
				message:{
					profit:null,
					defeat:null,
					slogon:''
				},
				times:constant.TimeTabData,
				isActive:''
			}
		},
		computed:{
			time(){
				switch(this.$route.query.time){
					case 0:
					return '本月';
					break;

					case 1:
					return '近3个月';
					break;

					case 2:
					return '近半年';
					break;

					case 3:
					return '今年';
					break;

					case 4:
					return '2016年';
					break;

					default:
					let date=this.$route.query.time.split('');
					let year=date.slice(0,4).join('');
					let month=date.slice(4,6).join('');
					return year+'年'+month+'月';
				}
			}
		},
		created(){
			this.initEvent();
		},
		methods:{
			initEvent(){
				this.module=0
				let self=this;
				let obj={'recent':''};
				switch(this.$route.query.time){
					case 0:
					obj.recent='curmonth';
					break;

					case 1:
					obj.recent='quarter';
					break;

					case 2:
					obj.recent='halfyear';
					break;

					case 3:
					obj.recent='year';
					break;

					case 4:
					obj.recent='2016';
					break;

					default:
					obj.recent=this.$route.query.time;
				}
				RemoteDAO.callZL13100040(obj,self.ZL13100040);
			},
			ZL13100040(result){
				if(result.error=='1'){
					this.module=1
				}
				else{
					let data=result.data;
					let bigdata=JSON.parse(data).body[0].bigdata;
					let specData=JSON.parse(bigdata).hits.hits;
					if(specData.length==0){
						this.module=2
					}
					else{
						let profitRate=Math.round(JSON.parse(bigdata).hits.hits[0]._source.total_profit_total_rate*100);
					    this.message.defeat=Math.round(JSON.parse(bigdata).hits.hits[0]._source.profit_index);
					    if(this.message.defeat<=10){
					    	this.message.slogon='股市征程漫漫，继续加油！';
					    	this.isActive='purple'
					    }
					    else if(this.message.defeat<=30){
					    	this.message.slogon='股神的未来不是梦！';
					    	this.isActive='orange'
					    }
					    else if(this.message.defeat<=50){
					    	this.message.slogon='你离股神已经很接近了！';
					    	this.isActive='yellow'
					    }
					    else if(this.message.defeat<=70){
					    	this.message.slogon='厉害了我的天，请收下我的膝盖！';
					    	this.isActive='lightBlue'
					    }
					    else{
					    	this.message.slogon='股神，请接受我的膜拜！';
					    	this.isActive='blue'
					    }
					    this.message.profit=profitRate;
					}
				}
			},
			Share(){
				TDAPP.onEvent('002022','');
				TDAPP.send();
				let addParas='?&profit='+this.message.profit+'&defeat='+this.message.defeat+'&date='+this.$route.query.time;
				let obj={
					title:'资产分析，更懂自己！',
					content:'实时查，资产分析帮您轻松理财！',
					icon:'https://dl.app.gtja.com/web/zcfx/shareland.png',
					linkurl:'https://dl.app.gtja.com/web/zcfx/shareland/index.html'+addParas,
					moments:'all'
				};
				RemoteDAO.share(obj);
			},
			backTo(){
				this.$router.replace(this.$route.query.path);
			}
		},
		components:{
			'return-error':ReturnError,
			'return-empty':ReturnEmpty
		}
	}
</script>
<style scoped>
	#share-push{
		background: #fff;
		color: #fff;
	}
	.header{
		margin-top: 0;
		width: 100%;
		height: 0.44rem;
		background: #212138;
		display: flex;
		justify-content: center;
		align-items: stretch;
		position: fixed;
		top: 0;
		z-index: 1;
	}
	.header .container{
		width: 10%;
		flex-grow: 1;
		display: inline-flex;
	}
	.header .left{
		padding-left: 0.15rem;
		box-sizing: border-box;
		justify-content: left;
		align-items: center;
	}
	.header img{
		height: 0.18rem;
		position: relative;
		left: 0;
	}
	.header .center{
		justify-content: center;
		align-items: center;
	}
	.header .right{
		padding-right: 0.15rem;
		box-sizing: border-box;
		justify-content: flex-end;
		align-items: center;
	}
	.header div{
		color: #fff;
		font-size: 0.18rem;
	}
	.banner{
		width: 100%;
		height: 5.53rem;
		padding-top: 1.1rem;
		box-sizing: border-box;
		position: fixed;
		top: 0.44rem;
	}
	.score{
		height: 0.84rem;
		display: flex;
		justify-content: center;
		align-items: baseline;
		flex-direction: row;
	}
	.score .number{
		font-size: 0.6rem;
		line-height: 0.84rem;
	}
	.score .unit{
		font-size: 0.18rem;
	}
	.slogan{
		margin-top: 0.67rem;
		font-size: 0.18rem;
		color: rgba(255,255,255,0.9);
		text-align: center;
	}
	.quote{
		margin-top: 0.16rem;
		height: 0.5rem;
		line-height: 0.5rem;
	}
	.quote .quoteContainer{
		width: 2.5rem;
		height: 0.6rem;
		margin-left: 50%;
		transform: translate(-50%,0);
		background: rgba(255,255,255,0.15);
		position: relative;
		color: #fff;
		font-size: 0.16rem;
		padding: 0.05rem 0;
		box-sizing: border-box;
	}
	.border-shadow{
		width: 100%;
		height: 1px;
		background: #fff;
		position: absolute;
	}
	.top{
		margin-top: 0;
		top: -1px;
	}
	.bottom{
		bottom: 0;
	}
	.symbol-quote{
		font-size: 0.36rem;
		height: 100%;
		width: 0.2rem;
		position: absolute;
		top: 0;
		text-align: center;
	}
	.left{
		left: 0;
	}
	.right{
		right: 0;
	}
	.content{
		box-sizing: border-box;
		text-align: center;
		line-height: 0.225rem;
	}
	.share-btn{
		width: 100%;
		height: 0.5rem;
		background: #309fea;
		text-align: center;
		font-size: 0.2rem;
		color: #fff;
		line-height: 0.5rem;
		position: fixed;
		bottom: 0;
	}
	.error{
		margin-top: 0.44rem;
	}
	.empty{
		margin-top: 0.44rem;
	}
	.purpleStyle{
		background: url(../../assets/images/banner-share-push_0-10.png) no-repeat;
		background-size: 100%;
	}
	.purpleStyle .score{
		color: #cb73e7;
	}
	.purpleStyle .slogan{
		text-shadow: 0 0.1rem 0.2rem #004c77;
	}
	.purpleStyle .quoteContainer{
		text-shadow: 0 0.1rem 0.15rem #004c77;
	}
	.purpleStyle .border-shadow{
		box-shadow: 0 0.01rem 0.02rem 0 rgba(0,76,118,0.87);
	}
	.orangeStyle{
		background: url(../../assets/images/banner-share-push_10-30.png) no-repeat;
		background-size: 100%;
	}
	.orangeStyle .score{
		color: #f1b468;
	}
	.orangeStyle .slogan{
		text-shadow: 0 0.01rem 0.02rem #9a2200;
	}
	.orangeStyle .quoteContainer{
		text-shadow: 0 0.01rem 0.015rem #9a2200;
	}
	.orangeStyle .border-shadow{
		box-shadow: 0 0.01rem 0.02rem 0 rgba(212,50,3,0.8);
	}
	.yellowStyle{
		background: url(../../assets/images/banner-share-push_30-50.png) no-repeat;
		background-size: 100%;
	}
	.yellowStyle .score{
		color: #ebbd1a;
	}
	.yellowStyle .slogan{
		text-shadow: 0 0.01rem 0.02rem #9a2200;
	}
	.yellowStyle .quoteContainer{
		text-shadow: 0 0.01rem 0.015rem #9a2200;
	}
	.yellowStyle .border-shadow{
		box-shadow: 0 0.01rem 0.02rem 0 rgba(212,50,3,0.8);
	}
	.lightBlueStyle{
		background: url(../../assets/images/banner-share-push_50-70.png) no-repeat;
		background-size: 100%;
	}
	.lightBlueStyle .score{
		color: #2db5f3;
	}
	.lightBlueStyle .slogan{
		text-shadow: 0 0.01rem 0.02rem #004c76;
	}
	.lightBlueStyle .quoteContainer{
		text-shadow: 0 0.01rem 0.015rem #004c76;
	}
	.lightBlueStyle .border-shadow{
		box-shadow: 0 0.01rem 0.02rem 0 rgba(0,76,118,0.87);
	}
	.blueStyle{
		background: url(../../assets/images/banner-share-push_70-100.png) no-repeat;
		background-size: 100%;
	}
	.blueStyle .score{
		color: #177ed1;
	}
	.blueStyle .slogan{
		text-shadow: 0 0.01rem 0.02rem #004c77;
	}
	.blueStyle .quoteContainer{
		text-shadow: 0 0.01rem 0.015rem #004c77;
	}
	.blueStyle .border-shadow{
		box-shadow: 0 0.01rem 0.02rem 0 rgba(0,76,118,0.87);
	}
</style>
